<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
</head>
<style>
    .ok-body {
        padding: 10px
    }
    .layui-form-item {
        margin-bottom: 2px;
        width: 600px;
    }
    .layui-form-item .layui-inline {

        margin-right: 0px;
    }
    span{
        font-size: xx-small
    }
</style>

<body>
<div class="ok-body">
    <input type="hidden" name="deviceId"  th:value="${id}">
    <div class="layui-container">
        <div class="layui-row layui-col-space5">

            <div class="layui-col-md5">
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>更换配件</legend>
                            <!--更配件列表 开始-->
                            <table class="layui-hide" id="changeComponent" lay-filter="changeComponent"></table>
                            <div id="componentPageDiv"></div>
                            <!--更配件列表 结束-->
                        </fieldset>
                    </div>

                    <div class="layui-col-md12">

                        <fieldset class="layui-elem-field layui-field-title">
                            <legend id="deviceStatusType">周运行状态</legend>

                            <div class="layui-form">

                                <div class="layui-form-item" >

                                    <div id="dateDiv">
                                        <label class="layui-form-label">选择日期</label>
                                        <div class="layui-input-inline" style="margin-right: 0px;">
                                            <input id="date" type="text"  class="layui-input" />
                                        </div>
                                    </div>

                                    <div id="monthDiv" style="display: none">
                                        <label class="layui-form-label">选择月份</label>
                                        <div class="layui-input-inline" style="margin-right: 0px;">
                                            <input id="month" type="text" class="layui-input" />
                                        </div>
                                    </div>

                                    <button class="layui-btn  layui-btn-normal" style="margin-left: 5px" lay-submit lay-filter="search">确定</button>
                                </div>

                            </div>

                            <div class="layui-form layui-form-pane">

                                <div class="layui-form-item" style="width: 390px;">
                                    <label class="layui-form-label">设备状态</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="deviceStatus" readonly class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="width: 390px;">
                                    <label class="layui-form-label" style="font-size: small;">重复故障部位</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="repeatPart" readonly class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="width: 390px;">
                                    <label class="layui-form-label">故障超2小时</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="overTwoHour" readonly class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="width: 390px;" pane>
                                    <label class="layui-form-label">状态类型</label>
                                    <div class="layui-input-block" >
                                        <input type="checkbox" checked value="1" id="statusType" lay-skin="switch" lay-filter="weekMonth" lay-text="周|月">
                                    </div>
                                </div>

                                <textarea  name="tips" readonly="readonly" class="layui-textarea" style="border: none; color: red;text-align: center;width: 400px;">请赶紧安排以上重复故障部位的计划检修维护!</textarea>

                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>

            <div class="layui-col-md7">
                <div class="layui-row">

                    <div class="layui-col-md12">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>故障列表</legend>
                                <table class="layui-hide" id="deviceFaultInfo" lay-filter="deviceFaultInfo"></table>
                                <div id="pageDiv"></div>
                        </fieldset>
                    </div>

                    <div class="layui-col-md12">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>设备信息</legend>
                            <!--设备表单 开始-->
                            <form class="layui-form layui-form-pane">

                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">设备名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name" readonly  class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">设备编号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="number" readonly class="layui-input">
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">设备型号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="model" readonly class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">制作商</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="producer" readonly class="layui-input">
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">出厂日期</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="bornDate" readonly class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">安装日期</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="installDate" readonly class="layui-input">
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">故障总时长</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="failTotalTime" readonly class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">故障总次数</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="failCount" readonly  class="layui-input">
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">生产线</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="productionLine" readonly autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label" style="font-size: xx-small;">平均维修时间</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="mttr" id="date1" readonly class="layui-input" style="border-color: red;">
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <!--设备表单 结束-->
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>

<script th:inline="none">
    layui.use(['table','laypage','laydate','form','layer'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var deviceId = JJZ.named('deviceId').val();


        //初始化日期输入框
        laydate.render({
            elem: '#date' //指定元素
            , max: JJZ.getNowFormatDate()
            ,format:'yyyy-MM-dd'
        });

        //初始化月份选择框
        laydate.render({
            elem: '#month' //指定元素
            ,type:'month'
            , max: JJZ.getNowFormatDate()
            ,format:'yyyyMM'
        });

        //初始化设备基本信息
        var deviceInfoParam =  'current=1&pageSize=2&searchCol=id&searchValue='+deviceId;
        JJZ.requestTableData('device',deviceInfoParam,function(data){
            var result = data.records[0];

            JJZ.named('name').val(result.name);
            JJZ.named('number').val(result.number);
            JJZ.named('model').val(result.modelName);
            JJZ.named('producer').val(result.producer);
            JJZ.named('failTotalTime').val(result.failTotalTime);
            JJZ.named('failCount').val(result.failCount);
            JJZ.named('installDate').val(JJZ.FormatDate(result.installDate,'yyyy-MM-dd'));
            JJZ.named('bornDate').val(JJZ.FormatDate(result.bornDate,'yyyy-MM-dd'));
            JJZ.named('productionLine').val(result.productionName);
            JJZ.named('mttr').val(result.failTotalTime / result.failCount);

        });

        var nowDate = Date();
        var nowDateStr = JJZ.FormatDate(nowDate,'yyyy-MM-dd');
        //默认一开始进入是查看本周
        var initDeviceStatusParam = 'type=1&deviceId='+deviceId+'&time='+nowDateStr;
        JJZ.requestData('/device/deviceRunStatus',initDeviceStatusParam,function(data){
            if(data.status == 1){
                JJZ.named('deviceStatus').val('状态良好(故障次数少于3)');
                JJZ.named('repeatPart').val('无重复故障部位');
                JJZ.named('overTwoHour').val('0 次');
            }else if(data.status == 2){
                JJZ.named('deviceStatus').val('状态一般(故障次数少于3)');
                var repartPartName = [];
                var repartPart = data.deviceParts;
                if(repartPart.length>0){
                    for(var index in repartPart){
                        repartPartName.push(repartPart[index].name);
                    }
                    JJZ.named('repeatPart').val(repartPartName.join(","));
                }else{
                    JJZ.named('repeatPart').val('无重复故障部位');
                }
                JJZ.named('overTwoHour').val(data.overTowHourFaultInfo.length+' 次');
            }else if(data.status == 3){
                JJZ.named('deviceStatus').val('状态不佳(故障次数3次及以上)');
                var repartPartName = [];
                var repartPart = data.deviceParts;
                if(repartPart.length>0){
                    for(var index in repartPart){
                        repartPartName.push(repartPart[index].name);
                    }
                    JJZ.named('repeatPart').val(repartPartName.join(","));
                }else{
                    JJZ.named('repeatPart').val('无重复故障部位');
                }
                JJZ.named('overTwoHour').val(data.overTowHourFaultInfo.length+' 次');
            }else if(data.status == 4){
                JJZ.named('deviceStatus').val('严重不佳(故障次数3次及以上)');
                var repartPartName = [];
                var repartPart = data.deviceParts;
                for(var index in repartPart){
                    repartPartName.push(repartPart[index].name);
                }
                JJZ.named('repeatPart').val(repartPartName.join(","));
                JJZ.named('overTwoHour').val(data.overTowHourFaultInfo.length+' 次');
            }
            form.render();
        });

        form.on('switch(weekMonth)', function(data){
            if(data.elem.checked){
                $('#dateDiv').css('display','block');
                $('#monthDiv').css('display','none');
                $('#deviceStatusType').text('周运行状态');
                $('#statusType').val(1);
               showWeekDeviceRunStatus();

            }else{
                $('#dateDiv').css('display','none');
                $('#monthDiv').css('display','block');

                $('#deviceStatusType').text('月运行状态');
                $('#statusType').val(2);
                showMonthDeviceRunStatus();
            }
        });

        form.on('submit(search)',function (data) {
            var type =$('#statusType').val();
            if(type === '1'){
                //周
                showWeekDeviceRunStatus();
            }else{
                //月
                showMonthDeviceRunStatus();
            }
            return false;
        });

        var changeComponentRender = {
            elem: '#changeComponent'
            ,title: '更换配件'
            ,width:390
            ,pageDiv:'componentPageDiv'
            ,requestUrl:'/damageComponent/deviceDamageComponent'   //使用自定义的请求url，不使用默认的，所以可以不要tableName这个属性
            ,initParam:"deviceId="+ deviceId  //初始化的请求参数 ，不需要加上分页的设置参数 a=1&b=2;
            ,cols: [[
                {field:'name', title:'配件名称',align:'left',width:94}
                ,{field:'count', title:'更换次数',align:'left',width:92}
                ,{field:'total', title:'更换总数',align:'left',width:92}
                ,{ title:'更换频次',align:'left',width:92,templet:function (d) {
                        return d.total / d.count;
                    }}
            ]]
        };
        var myComponentTable = new JJZ.MyTable(changeComponentRender);

        var initParam = 'type=1&kerWord=&deviceId='+deviceId;
        var tableRenderObject = {
            elem: '#deviceFaultInfo'
            ,title: '设备故障数据表'
            ,width:600
            ,height:430
            ,requestUrl:'/device/deviceFault'   //使用自定义的请求url，不使用默认的，所以可以不要tableName这个属性
            ,initParam:initParam   //初始化的请求参数 ，不需要加上分页的设置参数 a=1&b=2;
            ,cols: [[
                {field:'symptom', title:'现象',align:'center'}
                ,{field:'resolvent', title:'排除过程',align:'center',width:87}
                ,{field:'duration', title:'故障时长',align:'center',width:87}
                ,{field:'masterSolverName', title:'主维修',align:'center',width:73}
                ,{field:'solveName', title:'辅助维修',align:'center',width:87}
                ,{fixed: 'right',align:'center', title:'操作',templet:function(d){
                        return '<a href="javascript:showDeviceFaultDetail('+d.id+')" class="layui-table-link">查看详情</a>';
                    }}
            ]]
        };
        var myTable = new JJZ.MyTable(tableRenderObject);


        function showWeekDeviceRunStatus(){
            var initDeviceStatusParam;
            var dateStr = $('#date').val();
            if(dateStr && dateStr != ''){
                initDeviceStatusParam = 'type=1&deviceId='+deviceId+'&time='+dateStr;
            }else{
                initDeviceStatusParam = 'type=1&deviceId='+deviceId+'&time='+nowDateStr;
            }
            JJZ.requestData('/device/deviceRunStatus',initDeviceStatusParam,function(data){
                // console.log(data);
                if(data.status == 1){
                    JJZ.named('deviceStatus').val('状态良好(故障次数少于3)');
                    JJZ.named('repeatPart').val('无重复故障部位');
                    JJZ.named('overTwoHour').val('0 次');
                }else if(data.status == 2){
                    JJZ.named('deviceStatus').val('状态一般(故障次数少于3)');
                    var repartPartName = [];
                    var repartPart = data.deviceParts;
                    if(repartPart.length>0){
                        for(var index in repartPart){
                            repartPartName.push(repartPart[index].name);
                        }
                        JJZ.named('repeatPart').val(repartPartName.join(","));
                    }else{
                        JJZ.named('repeatPart').val('无重复故障部位');
                    }
                    JJZ.named('overTwoHour').val(data.overTowHourFaultInfo.length+' 次');
                }else if(data.status == 3){
                    JJZ.named('deviceStatus').val('状态不佳(故障次数3次及以上)');
                    var repartPartName = [];
                    var repartPart = data.deviceParts;
                    if(repartPart.length>0){
                        for(var index in repartPart){
                            repartPartName.push(repartPart[index].name);
                        }
                        JJZ.named('repeatPart').val(repartPartName.join(","));
                    }else{
                        JJZ.named('repeatPart').val('无重复故障部位');
                    }
                    JJZ.named('overTwoHour').val(data.overTowHourFaultInfo.length+' 次');
                }else if(data.status == 4){
                    JJZ.named('deviceStatus').val('严重不佳(故障次数3次及以上)');
                    var repartPartName = [];
                    var repartPart = data.deviceParts;
                    for(var index in repartPart){
                        repartPartName.push(repartPart[index].name);
                    }
                    JJZ.named('repeatPart').val(repartPartName.join(","));
                    JJZ.named('overTwoHour').val(data.overTowHourFaultInfo.length+' 次');
                }
                form.render();
            });
        }

        function showMonthDeviceRunStatus(){
            var deviceMonthParam;
            var monthStr = $('#month').val();
            if(monthStr && monthStr != ''){
                deviceMonthParam = 'type=2&deviceId='+deviceId+'&time='+monthStr;
            }else{
                var nowMonthStr = JJZ.FormatDate(nowDate,'yyyyMM');
                deviceMonthParam = 'type=2&deviceId='+deviceId+'&time='+nowMonthStr;
            }
            JJZ.requestData('/device/deviceRunStatus',deviceMonthParam,function(data){
                if(data.status == 1){
                    JJZ.named('deviceStatus').val('状态良好(故障次数少于6)');
                    JJZ.named('repeatPart').val('无重复故障部位');
                    JJZ.named('overTwoHour').val('0 次');
                }else if(data.status == 2){
                    JJZ.named('deviceStatus').val('状态正常(故障次数少于6)');
                    var repartPartName = [];
                    var repartPart = data.deviceParts;
                    if(repartPart.length>0){
                        for(var index in repartPart){
                            repartPartName.push(repartPart[index].name);
                        }
                        JJZ.named('repeatPart').val(repartPartName.join(","));
                    }else{
                        JJZ.named('repeatPart').val('无重复故障部位');
                    }
                    JJZ.named('overTwoHour').val(data.overTowHourFaultInfo.length+' 次');
                }else if(data.status == 3){
                    JJZ.named('deviceStatus').val('状态不佳(故障次数6次及以上)');
                    var repartPartName = [];
                    var repartPart = data.deviceParts;
                    if(repartPart.length>0){
                        for(var index in repartPart){
                            repartPartName.push(repartPart[index].name);
                        }
                        JJZ.named('repeatPart').val(repartPartName.join(","));
                    }else{
                        JJZ.named('repeatPart').val('无重复故障部位');
                    }
                    JJZ.named('overTwoHour').val(data.overTowHourFaultInfo.length+' 次');
                }else if(data.status == 4){
                    JJZ.named('deviceStatus').val('严重不佳(故障次数6次及以上)');
                    var repartPartName = [];
                    var repartPart = data.deviceParts;
                    if(repartPart.length>0){
                        for(var index in repartPart){
                            repartPartName.push(repartPart[index].name);
                        }
                        JJZ.named('repeatPart').val(repartPartName.join(","));
                    }else{
                        JJZ.named('repeatPart').val('无重复故障部位');
                    }
                    JJZ.named('overTwoHour').val(data.overTowHourFaultInfo.length+' 次');
                }
                form.render();
            });
        }


    });

    function showDeviceFaultDetail(deviceId) {
        JJZ.checkGetRequestPermission('/faultInfo/faultInfoDetail?id=' + deviceId,function (hasPermission) {
            if(hasPermission){
                parent.layer.open({
                    type: 2
                    , content: 'faultInfo/faultInfoDetail?id=' + deviceId   //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    ,area: ['90%', '80%']
                });
            }else{
                layer.msg('无权访问');
            }
        })
    }
</script>

</body>
</html>